<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人名片展示</title>
    <link rel="stylesheet" href="web-styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <nav class="navbar">
        <div class="nav-container">
            <h1 class="nav-logo">名片展示系统</h1>
            <ul class="nav-menu">
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </div>
    </nav>

    <main class="main-container">
        <div class="card-container">
            <div class="avatar-section">
                <img src="https://via.placeholder.com/150/667eea/ffffff?text=头像" alt="个人头像" class="avatar">
                <div class="online-status"></div>
            </div>
            
            <div class="info-section">
                <h2 class="name">张三</h2>
                <p class="title">前端开发工程师</p>
                
                <div class="details">
                    <div class="detail-item">
                        <i class="fas fa-building"></i>
                        <span>创新科技有限公司</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-phone"></i>
                        <span>138-0000-0000</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-envelope"></i>
                        <span>zhangsan@example.com</span>
                    </div>
                    <div class="detail-item">
                        <i class="fas fa-map-marker-alt"></i>
                        <span>北京市朝阳区</span>
                    </div>
                </div>
            </div>

            <div class="skills-section">
                <h3>技能专长</h3>
                <div class="skills-tags">
                    <span class="skill-tag">HTML/CSS</span>
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">Vue.js</span>
                    <span class="skill-tag">React</span>
                </div>
            </div>

            <div class="contact-section">
                <button class="contact-btn primary">
                    <i class="fas fa-comment"></i>
                    发送消息
                </button>
                <button class="contact-btn secondary">
                    <i class="fas fa-share-alt"></i>
                    分享名片
                </button>
            </div>
        </div>
    </main>

    <footer class="footer">
        <p>&copy; 2024 个人名片展示. 所有权利保留.</p>
    </footer>
</body>
</html>
